<template>
  <view class="container">
    <view class="header">
      <text class="title">用户详情</text>
      <text class="subtitle">用户ID: {{ userId }}</text>
    </view>
    
    <view class="content">
      <view class="user-info">
        <view class="avatar">
          <text class="avatar-text">{{ userId.slice(-2) }}</text>
        </view>
        <view class="info">
          <text class="name">用户 {{ userId }}</text>
          <text class="email">user{{ userId }}@example.com</text>
        </view>
      </view>
      
      <view class="actions">
        <button class="btn primary" @click="goBack">返回</button>
        <button class="btn secondary" @click="goToProjects">查看项目</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UserDetail',
  data() {
    return {
      userId: ''
    }
  },
  onLoad(query) {
    // 获取路由参数
    this.userId = query.id || '未知'
    console.log('用户详情参数:', query)
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    goToProjects() {
      uni.switchTab({
        url: '/pages/tabs/project/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  padding-bottom: 40rpx;
  border-bottom: 2rpx solid #eee;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.subtitle {
  display: block;
  font-size: 32rpx;
  color: #666;
}

.content {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
  padding-bottom: 40rpx;
  border-bottom: 2rpx solid #eee;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 40rpx;
}

.avatar-text {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
}

.info {
  flex: 1;
}

.name {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.email {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.actions {
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  padding: 30rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  border: none;
  
  &.primary {
    background-color: #007aff;
    color: #fff;
    
    &:active {
      background-color: #0056b3;
    }
  }
  
  &.secondary {
    background-color: #f8f9fa;
    color: #007aff;
    border: 2rpx solid #007aff;
    
    &:active {
      background-color: #e9ecef;
    }
  }
}
</style>